<template>
  <div class="user-stats-page">
    <div class="page-header">
      <div class="header-top">
        <button class="back-btn" @click="$router.go(-1)">← 返回</button>
        <h1>个人数据</h1>
        <div class="spacer"></div>
      </div>
    </div>
    
    <div class="stats-content">
      <div class="stats-card" v-if="userStats">
        <h2>答题统计</h2>
        <div class="stat-item">
          <span class="stat-label">总答题数</span>
          <span class="stat-value">{{ userStats.total_answered || 0 }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">正确率</span>
          <span class="stat-value">{{ userStats.accuracy_rate ? userStats.accuracy_rate.toFixed(1) + '%' : '暂无' }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">总题目数</span>
          <span class="stat-value">{{ userStats.total_questions || 0 }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">答对题数</span>
          <span class="stat-value">{{ userStats.total_correct || 0 }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">完成率</span>
          <span class="stat-value">{{ userStats.completion_rate ? userStats.completion_rate.toFixed(1) + '%' : '暂无' }}</span>
        </div>
      </div>
      
      <div class="loading" v-else-if="loading">
        <p>正在加载个人数据...</p>
      </div>
      
      <div class="error" v-else-if="error">
        <p>加载个人数据失败: {{ error }}</p>
        <button class="retry-btn" @click="loadUserStats">重试</button>
      </div>
      
      <div class="empty" v-else>
        <p>暂无个人数据</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getUserStats } from '../api/challenge'

// 数据状态
const userStats = ref<any>(null)
const loading = ref(true)
const error = ref('')

// 加载用户答题统计信息
const loadUserStats = async () => {
  try {
    console.log('[UserStats] [DEBUG] 开始加载用户答题统计信息')
    loading.value = true
    error.value = ''
    
    const response = await getUserStats()
    console.log('[UserStats] [DEBUG] 用户答题统计信息接口响应:', response)
    
    // 检查响应数据结构
    if (response && typeof response === 'object' && 'success' in response && response.success && 'data' in response && response.data) {
      userStats.value = response.data
    } else {
      console.warn('[UserStats] [DEBUG] 用户答题统计信息响应数据为空或格式不正确')
      userStats.value = null
    }
  } catch (err: any) {
    console.error('[UserStats] [ERROR] 加载用户答题统计信息失败:', err)
    error.value = err.message || '加载失败'
  } finally {
    loading.value = false
    console.log('[UserStats] [DEBUG] 用户答题统计信息加载完成')
  }
}

// 组件挂载时加载数据
onMounted(() => {
  console.log('[UserStats] [DEBUG] 组件挂载完成，开始加载用户答题统计信息')
  loadUserStats()
})
</script>

<style scoped>
.user-stats-page {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 1.8rem;
  margin: 0;
  color: #2c3e50;
  flex: 1;
  text-align: center;
  padding: 0 20px;
}

.back-btn {
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  white-space: nowrap;
  background-color: #f8f9fa;
  color: #495057;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.back-btn:hover {
  background-color: #e9ecef;
}

.spacer {
  width: 100px;
}

.stats-content {
  max-width: 800px;
  margin: 0 auto;
}

.stats-card {
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  box-sizing: border-box;
}

.stats-card h2 {
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 1.5rem;
  text-align: center;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-label {
  font-size: 1.1rem;
  color: #495057;
}

.stat-value {
  font-size: 1.3rem;
  font-weight: bold;
  color: #42b983;
}

.loading, .error, .empty {
  text-align: center;
  padding: 40px 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.loading p, .error p, .empty p {
  margin: 0;
  color: #6c757d;
  font-size: 1.1rem;
}

.retry-btn {
  background-color: #ff6b35;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 15px;
}

.retry-btn:hover {
  background-color: #e55a2b;
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .user-stats-page {
    padding: 15px;
  }
  
  .page-header {
    padding: 15px;
  }
  
  .page-header h1 {
    font-size: 1.5rem;
  }
  
  .stats-card {
    padding: 20px;
  }
  
  .stat-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .stat-label {
    font-size: 1rem;
  }
  
  .stat-value {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .user-stats-page {
    padding: 10px;
  }
  
  .header-top {
    flex-direction: column;
    gap: 15px;
  }
  
  .page-header h1 {
    font-size: 1.3rem;
    padding: 0;
  }
  
  .back-btn {
    padding: 8px 15px;
    font-size: 0.9rem;
  }
  
  .stats-card {
    padding: 15px;
  }
  
  .stats-card h2 {
    font-size: 1.3rem;
  }
}
</style>